<template>
    <div>
        <Modal v-model="modal.detail" title="发货详情" width="80%">
            <div class="detail-info">
                <Row>
	<i-col span="12"><span class="detail-title">订单编号：</span><span v-text="form.id"></span></i-col>
<i-col span="12"><span class="detail-title">店铺编号：</span><span v-text="form.shopId"></span></i-col>
<i-col span="12"><span class="detail-title">订单号：</span><span v-text="form.orderNo"></span></i-col>

	<i-col span="12"><span class="detail-title">收货人：</span><span v-text="form.realName"></span></i-col>
<i-col span="12"><span class="detail-title">手机号：</span><span v-text="form.phone"></span></i-col>


	<i-col span="12"><span class="detail-title">省：</span><span v-text="form.province"></span></i-col>
<i-col span="12"><span class="detail-title">市：</span><span v-text="form.city"></span></i-col>


	<i-col span="12"><span class="detail-title">区/县：</span><span v-text="form.district"></span></i-col>
<i-col span="12"><span class="detail-title">地址别名：</span><span v-text="form.addressAlias"></span></i-col>


	<i-col span="12"><span class="detail-title">详细地址：</span><span v-text="form.address"></span></i-col>
<i-col span="12"><span class="detail-title">门牌号：</span><span v-text="form.area"></span></i-col>


	<i-col span="12"><span class="detail-title">是否已发货：</span><span v-text="form.isDeliver"></span></i-col>
<i-col span="12"><span class="detail-title">收货方式：</span><span v-text="form.deliverType"></span></i-col>


	<i-col span="12"><span class="detail-title">物流公司名称：</span><span v-text="form.logisticsCompany"></span></i-col>
<i-col span="12"><span class="detail-title">物流公司编码：</span><span v-text="form.logisticsCode"></span></i-col>


	<i-col span="12"><span class="detail-title">物流单号：</span><span v-text="form.logisticsNo"></span></i-col>


	<i-col span="12"><span class="detail-title">创建时间：</span><span v-text="form.createTime"></span></i-col>
<i-col span="12"><span class="detail-title">更新时间：</span><span v-text="form.updateTime"></span></i-col>

</Row>

            </div>
            <div style="margin-top: 10px;">
                <div style="font-weight:bold;">-- 订单项信息 --</div>
                 <Table
                    ref="dataTable"
                    :loading="orderItemsTable.loading"
                    :columns="orderItemsTable.tableColumns"
                    :data="orderItemsTable.tableRows"
                    style="margin-top:20px;"
					
                    ></Table>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="cancelModal('detail')">取消</Button>
                <Button v-if="canDeliver && !isVerification" type="primary" size="large" @click="showDeliveryLogisticsModal">确认发货</Button>
                <Button v-else-if="canDeliver && isVerification" type="primary" size="large" @click="doOrderVerification" :loading="loading.verification">确认核销</Button>
                <Button v-else type="primary" size="large" @click="cancelModal('detail')">关闭</Button>
            </div>
        </Modal>
        <ImgModal ref="imgModal" />
    </div>
</template>

<script>
	import * as utils from '@/api/utils-v2'
    import * as ResponseStatus from '@/api/response-status'
    import ImgModal from '_c/img-modal'

    import config from '@/config'
    const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
    const cdnUrl = config.baseUrl.cdnUrl
    export default {
        name: 'goodsOrderDeliveryDetailModal',
        components: {
          ImgModal
        },
        props: {
            isVerification: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                modal: {
                    detail: false
                },
                loading:  {
                    verification: false
                },
				dataDictCodes: ['IS_ACTIVE','GOODS_IS_DELIVERY'],
                dataDictItems: {},
                canDeliver: false,
                isDeliver: null,
                isActive: null,
                form: {
                    id: null,
                    orderNo: null,
shopId: null,
realName: null,
phone: null,
province: null,
city: null,
district: null,
addressAlias: null,
address: null,
area: null,
isDeliver: null,
logisticsCompany: null,
logisticsCode: null,
logisticsNo: null,
version: null,
createTime: null,
updateTime: null,
isActive: null,

                },
                pager: {
                    pageNo: 1,
                    pageSize: 10,
                    total: 0
                },
                orderItemsTable: {
                    loading: false,
                    tableColumns: [
                        {
                            width: 60,
                            align: 'center',
                            fixed: 'left',
                            render: (h, params) => {
                                return h('span', params.index + (this.pager.pageNo - 1) * this.pager.pageSize + 1)
                            }
                        },
                        {
title: '订单项编号',
key: 'id',
minWidth: 120
},
{
title: '商品编号',
key: 'goodsId',
minWidth: 120
},
{
title: 'SKU编号',
key: 'goodsSkuId',
minWidth: 120
},
{
title: 'SKU图片编号',
key: 'skuPicId',
minWidth: 120
},
{
title: 'SKU图片',
key: 'skuPicUrl',
minWidth: 120,
sortable: true,
render: (h, params) => {
              let imgSrc = params.row.skuPicUrl
              if (!imgSrc) {
                return h('span',{},'暂无图片')
              }
              if (imgSrc.indexOf('http') < 0) {
                imgSrc = cdnUrl + '/' + imgSrc
              }
              return h(
                'img',
                {
                  attrs: {
                    src: imgSrc
                  },
                  style: {
                    width: '60px',
                    height: '60px',
                    cursor: 'pointer'
                  },
                  on: {
                    click: () => {
                      this.showImgModal(imgSrc)
                    }
                  }
                },
                ''
              )
            }
},
{
title: '售卖标题',
key: 'skuTitle',
minWidth: 120
},
{
title: 'SKU规格信息',
key: 'skuInfo',
minWidth: 120
},
{
title: '购买数量',
key: 'quantity',
minWidth: 120
},
{
title: '实付金额（元）',
key: 'payAmount',
minWidth: 120
},
{
title: '优惠金额（元）',
key: 'discountAmount',
minWidth: 120
}
                    ],
                    tableRows: []
                }
            }
        },
        computed: {},
        mounted() {},
        methods: {
          /**
           * 关闭模态窗
           */
          cancelModal(modal) {
            this.modal[modal] = false
          },
          /**
           * 显示发货的模态窗
           */
          showDeliveryLogisticsModal() {
            let data = JSON.parse(JSON.stringify(this.form))
            data.isActive = this.isActive
            data.isDeliver = this.isDeliver
            this.$emit('showDeliveryLogistics', data)
          },
          doOrderVerification() {
              this.loading.verification = true
              utils.doGet('/goods-order/admin/verification/' + this.form.id, {}).then(response => {
                  if (response.data.code === ResponseStatus.OK) {
                      this.modal.detail = false
                      this.$Message.info(response.data.message)
                      this.loading.verification = false
                      this.canDeliver = false
                      this.$emit('searchTable')
                  } else {
                      this.$Message.error(response.data.message)
                  }
              }).catch(error => {
                  console.log(error)
              })
          },
		    getDictItemsDisplayValue() {
                this.isActive = this.form.isActive
                this.isDeliver = this.form.isDeliver
				  utils.getDataDict(this.dataDictCodes).then(response => {
				  if (response) {
					  this.dataDictItems = response
					  
					  utils.getDetailDictItemDisplayValue(this, 'IS_ACTIVE', 'isActive')
					  utils.getDetailDictItemDisplayValue(this, 'GOODS_IS_DELIVERY', 'isDeliver')
					  
				  }
				  }).catch(error => {
				     console.log(error)
				  })
              },
              showImgModal(src) {
              let imgModal = this.$refs.imgModal
              imgModal.modal.img = true
              imgModal.imgSrc = src
            }
        }
    }
</script>

<style>

</style>
